<template>
  <div class="edit-container article-edit">
    <el-col :span="24">
      <el-form :model="dataForm" label-width="120px" :rules="dataFormRules" ref="dataForm" :size="size" label-position="right">
        <el-form-item label="标题" prop="title">
          <el-input ref="title" v-model="dataForm.title" auto-complete="off" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="dataForm.status">
            <el-radio v-for="item in statusList" :key="item.value" :label="item.value">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="标签" prop="labels">
          <el-col :span="20">
            <label-tag ref="label" :label="dataForm.labels" />
          </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="$refs.labelDialog.dialogVisible=true">选择</el-button>
          </el-col>
        </el-form-item>
        <el-form-item label="内容" prop="status">
          <vue-ueditor-wrap v-model="dataForm.content" />
        </el-form-item>
        <el-form-item>
          <el-button :size="size" @click.native="$router.go(-1)">取消</el-button>
          <el-button :size="size" type="primary" @click.native="save" :loading="loading">保存</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <label-dialog ref="labelDialog" :default-keys="dataForm.labelIds" @handle-ok="labelSelected" />
  </div>
</template>

<script>
import { mapState } from 'vuex'
import VueUeditorWrap from 'vue-ueditor-wrap'
import LabelDialog from '@/views/Blog/Label/Dialog'
import LabelTag from '@/components/Labels'

export default {
  components: {
    VueUeditorWrap,
    LabelDialog,
    LabelTag
  },
  data () {
    return {
      size: 'mini',
      loading: false,
      dataFormRules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ]
      },
      // 新增编辑界面数据
      dataForm: {
        id: 0,
        title: '',
        status: '1',
        content: '',
        labels: '',
        labelIds: []
      }
    }
  },
  methods: {
    loadData () {
      if (this.$route.query.id !== undefined) {
        this.dataForm.id = this.$route.query.id
        this.$api.article.get({ id: this.dataForm.id }).then((res) => {
          this.dataForm = res.data
          this.$refs.label.setLabel(res.data.labels)
        })
      }
    },
    save () {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          this.loading = true
          let params = Object.assign({}, this.dataForm)
          if (params.labelIds.length === 0) {
            params.labelIds.push(-1)
          }
          this.$api.article.save(params).then((res) => {
            this.loading = false
            if (res.code === 0) {
              this.$message({ message: '操作成功', type: 'success' })
              this.$router.push(this.getCurrentParentPath() + '/list')
            } else {
              this.$message({ message: '操作失败, ' + res.message, type: 'error' })
            }
          })
        }
      })
    },
    labelSelected (data) {
      let names = []
      let ids = []
      for (let i = 0; i < data.length; i++) {
        names.push(data[i].name)
        ids.push(data[i].id)
      }
      this.dataForm.labels = names.join(',')
      this.$refs.label.setLabel(names.join(','))
      this.dataForm.labelIds = ids
    }
  },
  mounted () {
    this.loadData()
    this.$refs.title.focus()
  },
  computed: {
    ...mapState({
      statusList: state => state.app.typeList.blog_article_status
    })
  }
}
</script>

<style lang="scss">
.article-edit {
  .el-tag {
    margin: auto 5px;
  }
}
</style>
